// 使用Context对象跨多几组件通信
// 1. 创建Context对象：React.createContext()=> Provider（提供数据）和Consumer（接收数据）组件
// 2. 使用Provider组件包裹要共享数据的组件，通过Provider组件的value属性提供共享数据
// 3. 使用Consumer组件接收共享数据

import React, { Component } from 'react'
// const { Provider, Consumer } = React.createContext()
import { Provider, Consumer } from './context'
//  子组件
const Child3 = () => {

    return (
        <div>
            <h3>函数子组件3</h3>
            {/* 获取根组件的数据 */}
            <Consumer>{(data) => {
                console.log(data)
                return <p>{data}</p>
            }}</Consumer>
        </div>
    )
}
class Child2 extends Component {
    // 接受共享数据
    reciveData = (data) => {
        console.log('=', data)
        return (
            <div>
                <p style={{ background: 'green' }} >{data}</p>
            </div>
        )
    }
    render() {
        return (
            <div>
                <h2>类子组件2</h2>
                <hr />
                <Child3 />
                <Consumer>{this.reciveData}</Consumer>
            </div>
        )
    }
}
class Child1 extends Component {
    render() {
        return (
            <div>
                <h1>类子组件1</h1>
                <hr />
                <Child2 />
            </div>
        )
    }
}
// 根组件
class App extends Component {
    state = {
        a: 10000
    }
    changeA = () => {
        this.setState({
            a: Math.random() * 100
        })
    }
    render() {
        return (
            <Provider value={this.state.a}>
                <h1>app</h1>
                <button onClick={this.changeA}>change</button>
                <hr />
                <Child1 />
            </Provider>
        )
    }
}

export default App
